<div class="details_wai">
     <!-- <div class="details">
        <div class="details_lef">
            <div class="details_lef_one"><img
                    src="https://media.tiffany.cn/is/image/Tiffany/EcomBrowseM/tiffany-soleste-v-60875650_977200_ED-60875650_977200_ED.jpg?hei=384&wid=384"
                    alt=""></div>
        </div>
        <div class="details_cen">
            <div class="bao">
                <div class="mo"></div>
                <div class="details_cen_one"><img src="https://media.tiffany.cn/is/image/Tiffany/EcomBrowseM/tiffany-soleste-v-60875650_977200_ED-60875650_977200_ED.jpg?hei=384&wid=384" alt=""></div>
            </div>
        </div>
        <div class="details_rig">
            <div class="details_tit">Tiffany Soleste 系列铂金镶嵌钻石 V 形戒指。</div>
            <div class="details_price">
                <p class="p1">￥2200</p>
                <p class="p2">添加至购物袋</p>
            </div>
            <div class="details_buy">
                立即购买
            </div>
        </div>
    </div> -->
</div>
<script>
    $(function(){
        var cart = (function(){ 
             if(localStorage.getItem(location.hash.slice(1))){
                 var data = null
                 try{
                     data =  JSON.parse(localStorage.getItem(location.hash.slice(1)))
                 }catch(e){
                     data = {}
                 }
                 return data;
             }else{
                 return {}
             }
         })(); 
         console.log(cart)
        //  var html = ""
         $(".details_wai").html(`<div class="details">
        <div class="details_lef">
            <div class="details_lef_one"><img
                    src="${cart.image}"
                    alt=""></div>
        </div>
        <div class="details_cen">
            <div class="bao">
                <div class="mo"></div>
                <div class="details_cen_one"><img src="${cart.image}" alt=""></div>
            </div>
        </div>
        <div class="details_rig">
            <div class="details_tit">${cart.title}</div>
            <div class="details_price">
                <p class="p1">￥${cart.price}</p>
                <p class="p2">添加至购物袋</p>
            </div>
            <div class="details_buy">
                立即购买
            </div>
        </div>
    </div>
    `)
    

    function Magnifier() {
        this.big_ele = $(".details_cen .bao")
        this.big_img_ele = $(".details_cen .bao .details_cen_one")
        this.big_img = $(".details_cen .bao .details_cen_one img")
        console.log(this.big_ele,this.big_img_ele,this.big_img);
    }
    Magnifier.prototype.bindEvent = function () {
        var magnifier_instance = this;
        this.big_ele.mouseover(function () {
            magnifier_instance.toggle("show");
            console.log(1)
        })
        this.big_ele.mouseout(function () {
            magnifier_instance.toggle("hide");
        })
        this.big_ele.mousemove(function (evt) {
            var e = evt || event;
            magnifier_instance.move(e.offsetX, e.offsetY);
        })
    }
    Magnifier.prototype.toggle = function (type) {
        switch (type) {
            case "show":
            this.big_img_ele.css({
                    width: 800 + "px",
                    height: 800 + "px",
                })
                break;
            case "hide":
            this.big_img_ele.css({
                    width: 400 + "px",
                    height: 400 + "px",
                    left: 0,
                    top: 0
                })
                break;
        }
    }
    Magnifier.prototype.move = function (x, y) {
        // console.log(x, y)
        var _left = x - 100
        var _top = y - 200
        this.big_img_ele.css({
            left: -_left,
            top: -_top
        })
    }
    new Magnifier().bindEvent();
})
</script>
